<template>
	<!-- 人才服务详情 -->
	<div class="serveDetail">
		<swiperService></swiperService>
		<div class="serveDetail-box">
			<div class="box">
				<div class="serveDetail-nav flexItems">
					<router-link to="/serve">{{$t('common.personService.rencai')}}</router-link>
					<span>></span>
					<router-link to="/serve_main?type=1">{{$t('common.personService.elite')}}</router-link>
					<span>></span>
					<span>{{$t('common.detail.details')}}</span>
				</div>
				<div class="serveDetail-content">
					<div class="serveDetail-title">
						<p v-if="info!=''">{{info.informationTitle}}</p>
						<p class="h99 font14">{{$t('common.personService.time1')}}：{{info.createTime}}</p>
					</div>
					<div class="serveDetail-text">
						<p v-html="info.content"></p>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>
<script>
import {ajax,reg,ajaxAdd } from '@/utils/js.js'
import {getNewsDetail} from '@/services/api.js'
import swiperService from '@/components/personService.vue' //人才服务轮播图
export default{
	components:{
	  swiperService
	},
	data(){
	  return{
		imgUrl:this.$store.state.imgUrl,	//图片前缀
		info:[],
		id: '',
	  }
	},
	methods:{
		content(){
			ajax(this,getNewsDetail,{id:this.id},res=>{
				console.log(res.data)
				this.info = res.data
			},err=>{})
		}
	},
	mounted() {
		console.log(this.$route.query.id)
		this.id = this.$route.query.id
		this.content()
	},
	watch:{
	  '$i18n.locale'(){
	    this.content()
	  },
	},
}
</script>
<style lang="scss">
.serveDetail{
	.banner{
	  img{display: block;}
	  .el-carousel--button{
	    width:12px;
	    height:12px;
	    background:rgba(255,255,255,1);
	    border-radius:50%;
	    opacity: 1;
	  }
	  .el-carousel--indicator.is-active button{
	    background-color: #0F54BC;
	  }
	}
	.banner .link{height: 450px;display: block;width: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
	.bannerdot {width: 100%;bottom:10px;left: 0;z-index: 999;}
	.bannerdot .swiper-pagination-bullet{width:12px;height:12px;background-color: #fff;opacity: 1;margin:0 8px;}
	.bannerdot .swiper-pagination-bullet-active{background-color: #0F54BC;}
	.ny-ban{
		background-color: #0F54BC;
	}
	.serveDetail-nav{
		padding: 10px 0;
		font-size: 13px;
		a{color: #999;}
		span{color: #999;margin: 0 5px;}
	}
	.serveDetail-content{
		width: 100%;
		background-color: #fff;
		padding: 50px 0;
		.serveDetail-title{
			text-align: center;
			p:nth-of-type(1){font-size: 22px;color: #333;margin-bottom: 10px;}
		}
		.serveDetail-text{
			padding: 0 135px;
			p{
				font-size: 14px;
				color: #666;
				margin-top: 20px;
				line-height: 24px;
			}
			img{
				width: 70%;
				margin: auto;
				display: block;
				margin-top: 20px;
			}
		}
	}
}

</style>
